import Description from '@/components/Description';
import Tabs, { TabsProps } from '@/components/Tabs';
import { stationControllerGetStation as getDetail } from '@/services/ess/station';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import React, { useEffect, useRef, useState } from 'react';
import { useIntl, useSearchParams } from 'umi';
import ArchivesTable from './components/ArchivesTable';
import ParamConfigTabs from './components/ParamConfigTabs';
import ServiceForm from './components/ServiceForm';

const BaseInfo: React.FC<{
  detailInfo: API.StationInfo;
}> = ({ detailInfo }) => {
  const intl = useIntl();
  const [items, setItems] = useState([
    {
      key: 'createTime',
      label: intl.formatMessage({ id: 'systemManagement.siteAdministrationMenu.creationtime' }),
      children: '',
    },
    {
      key: 'modifyTime',
      label: intl.formatMessage({ id: 'systemManagement.menuManagementMenu.updateTime' }),
      children: '',
    },
    {
      key: 'stationName',
      label: intl.formatMessage({ id: 'systemManagement.siteAdministrationMenu.plantName' }),
      children: '',
    },
    {
      key: 'stationNo',
      label: intl.formatMessage({ id: 'systemManagement.siteAdministrationMenu.plantCode' }),
      children: '',
    },
    {
      key: 'tenantName',
      label: intl.formatMessage({ id: 'systemManagement.siteAdministrationMenu.tenantName' }),
      children: '',
    },
    {
      key: 'stationType',
      label: intl.formatMessage({ id: 'systemManagement.siteAdministrationMenu.plantType' }),
      children: '',
    },
    {
      key: 'status',
      label: intl.formatMessage({ id: 'systemManagement.siteAdministrationMenu.plantStatus' }),
      children: '',
    },
    {
      key: 'contactName',
      label: intl.formatMessage({ id: 'systemManagement.siteAdministrationMenu.contactName' }),
      children: '',
    },
    {
      key: 'contactPhone',
      label: intl.formatMessage({ id: 'systemManagement.siteAdministrationMenu.contactPhone' }),
      children: '',
      span: 1,
    },
    {
      key: 'displayNone',
      label: '',
      children: '',
      hidden: true,
    },
    {
      key: 'displayNone1',
      label: '',
      children: '',
      hidden: true,
    },
    {
      key: 'displayNone2',
      label: '',
      children: '',
      hidden: true,
    },
    {
      key: 'remark',
      label: intl.formatMessage({
        id: 'systemManagement.siteAdministrationMenu.remarksDescription',
      }),
      children: '',
      span: 2,
    },
  ]);

  const [siteTypes, setSiteTypes] = useState([]);

  useEffect(() => {
    fetchDictInfo(DATABASE_TYPE_ENUM.SITE_TYPE).then((res) => {
      setSiteTypes(res || []);
    });
  }, []);

  useEffect(() => {
    if (detailInfo?.id) {
      const result = [...items].map((item) => {
        item.children = detailInfo[item.key];
        if (item.key === 'status') {
          item.children =
            detailInfo[item.key] === 1
              ? intl.formatMessage({ id: 'systemManagement.generalProcedure.enable' })
              : intl.formatMessage({ id: 'systemManagement.generalProcedure.disable' });
        }
        if (item.key === 'stationType') {
          item.children = siteTypes.find((row) => row.value === detailInfo[item.key])?.label;
        }
        return item;
      });
      setItems(result);
    }
  }, [detailInfo, siteTypes]);

  return <Description items={items} style={{ marginTop: 10 }} />;
};

const Detail: React.FC = () => {
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');

  const [activeKey, setActiveKey] = useState('1');
  const [detailInfo, setDetailInfo] = useState({});
  const intl = useIntl();

  useEffect(() => {
    getDetail({ id }).then((res) => {
      setDetailInfo(res?.data || {});
    });
  }, []);

  const archivesTableRef = useRef(null);
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: intl.formatMessage({ id: 'systemManagement.siteAdministrationMenu.Basicparameters' }),
      children: <BaseInfo detailInfo={detailInfo} />,
    },
    {
      key: '2',
      label: intl.formatMessage({
        id: 'systemManagement.siteAdministrationMenu.collectionArchive',
      }),
      children: (
        <ArchivesTable ref={archivesTableRef} id={id} fullPage={false} disableEdit={true} />
      ),
    },
    {
      key: '3',
      label: intl.formatMessage({
        id: 'systemManagement.siteAdministrationMenu.serviceInformation',
      }),
      children: <ServiceForm detailInfo={detailInfo} disableEdit={true} />,
    },
    {
      key: '4',
      label: intl.formatMessage({
        id: 'systemManagement.siteAdministrationMenu.parameterInformation',
      }),
      children: (
        <ParamConfigTabs
          detailInfo={detailInfo}
          id={id}
          className="global-secondary-tabs"
          disableEdit={true}
        />
      ),
    },
  ];

  return (
    <div>
      <Tabs
        activeKey={activeKey}
        items={items}
        className="global-tabs"
        onChange={(key: string) => {
          setActiveKey(key);
        }}
        hasChildTabs={activeKey === '4'}
      />
    </div>
  );
};
export default Detail;
